<template>
    <el-row class="rowStyle" gutter="6">
        <el-col :span="12" id="starHotel"></el-col>
        <el-col :span="12" id="nonStarHotel"></el-col>
    </el-row>
    <el-row class="rowStyle" gutter="3">
        <el-col :span="8" id="complains"></el-col>
        <el-col :span="8" id="warnings"></el-col>
        <el-col :span="8" id="visits"></el-col>
    </el-row>
</template>

<script>
import * as echarts from 'echarts'
import { onMounted, reactive, watch } from 'vue'

export default {
    props: {
        starHotelInfo: Array,
        nonStarHotelInfo: Array,
        complainsInfo: Array,
        warningsInfo: Array,
        visitsInfo: Array,
    },
    setup(props) {
        const starHotelChart = reactive({
            title: {
                text: '星级酒店统计'
            },
            legend: {
                data: ['数量']
            },
            xAxis: {
                data: ["三星", "四星", "五星"]
            },
            yAxis: {},
            series: [{
                name: '数量',
                type: 'bar',
                data: [props.starHotelInfo[0].number, props.starHotelInfo[1].number, props.starHotelInfo[2].number]
            }]
        });

        const nonStarHotelChart = reactive({
            title: {
                text: '非星级酒店统计'
            },
            legend: {
                data: ['数量']
            },
            xAxis: {
                data: ["青年旅舍", "民宿"]
            },
            yAxis: {},
            series: [{
                name: '数量',
                type: 'bar',
                data: [props.nonStarHotelInfo[0].number, props.nonStarHotelInfo[1].number]
            }]
        });

        const complainsChart = reactive({
            title: {
                text: '投诉统计'
            },
            legend: {
                data: ['数量']
            },
            xAxis: {
                data: ["未处理", "已处理"]
            },
            yAxis: {},
            series: [{
                name: '数量',
                type: 'bar',
                data: [props.complainsInfo[0].number, props.complainsInfo[1].number]
            }]
        });

        const visitsChart = reactive({
            title: {
                text: '访客统计'
            },
            legend: {
                data: ['数量']
            },
            xAxis: {
                data: [props.visitsInfo[0].info, props.visitsInfo[1].info, props.visitsInfo[2].info, props.visitsInfo[3].info]
            },
            yAxis: {},
            series: [{
                name: '数量',
                type: 'line',
                data: [props.visitsInfo[0].number, props.visitsInfo[1].number, props.visitsInfo[2].number, props.visitsInfo[3].number]
            }]
        });

        const warningsChart = reactive({
            title: {
                text: '预警统计'
            },
            legend: {
                data: ['数量']
            },
            xAxis: {
                data: ["蓝色预警", "黄色预警", "红色预警"]
            },
            yAxis: {},
            series: [{
                name: '数量',
                type: 'bar',
                data: [props.warningsInfo[0].number, props.warningsInfo[1].number, props.warningsInfo[2].number]
            }]
        });

        onMounted(() => { initChart(); });

        function initChart() {
            echarts.init(document.getElementById('starHotel'), 'light').dispose();
            echarts.init(document.getElementById('nonStarHotel')).dispose();
            echarts.init(document.getElementById('complains')).dispose();
            echarts.init(document.getElementById('warnings'), 'light').dispose();
            echarts.init(document.getElementById('visits')).dispose();
            echarts.init(document.getElementById('starHotel'), 'light').setOption(starHotelChart);
            echarts.init(document.getElementById('nonStarHotel')).setOption(nonStarHotelChart);
            echarts.init(document.getElementById('complains')).setOption(complainsChart);
            echarts.init(document.getElementById('warnings'), 'light').setOption(warningsChart);
            echarts.init(document.getElementById('visits')).setOption(visitsChart);
        };

        watch([props.starHotelInfo, props.nonStarHotelInfo, props.complainsInfo, props.warningsInfo, props.visitsInfo], () => { initChart(); });
    },
}
</script>

<style scoped>
.rowStyle {
    width: 98%;
    height: 50%;
    left: 50%;
    transform: translateX(-50%);
}
</style>
